<template>
  <div style="height: 600px; background-color: white">
    <el-page-header @back="goBack" content="小猴杂货铺" class="page_header">
    </el-page-header>
    <el-image
      style="width: 100px; height: 100px"
      :src="url"
      fit="cover"
      class="demo_image"
    ></el-image>
    <div
      class="demo-input-suffix"
      style="
        width: 600px;
        float: right;
        margin-left: 100px;
        margin-top: 100px;
        margin-right: 500px;
      "
    >
      <el-input placeholder="输入商品/店铺" v-model="searchContent">
        <i slot="prefix" class="el-input__icon el-icon-search"></i>
        <el-button slot="append" icon="el-icon-search" @click="getCont">搜索</el-button
        >
      </el-input>
    </div>
    <div class="tag-group">
      <span class="tag-group__title">商品种类:</span>
      <el-tag
        v-for="item in items"
        :key="item.label"
        :type="item.type"
        effect="dark"
        class="goods_tag"
        @click="findProduce(item.label)"
      >
        {{ item.label }}
      </el-tag>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      url:
        "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.lgstatic.com%2Fthumbnail_300x300%2Fi%2Fimage%2FM00%2F0D%2F45%2FCgqKkVbY9ICAU4kCAADJxGkvMqY307.png&refer=http%3A%2F%2Fwww.lgstatic.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1624933429&t=507e1d65dfeb891052d975abad434ac4",
      searchContent: "",
      items: [
          { type: '', label: '服饰' },
          { type: '', label: '家居' },
          { type: '', label: '数码' },
          { type: '', label: '零食' },
          { type: '', label: '图书' }
        ]
    };
  },
  methods: {
    goBack() {
      this.$router.push("/");
    },
    getCont() {
      console.log(this.searchContent);
    },
    findProduce(itemLabel){
        console.log(itemLabel);
    }
  },
};
</script>
<style>
.demo_image {
  margin-top: 100px;
  margin-left: 680px;
}
.page_header {
  height: 50px;
  padding-top: 30px;
  padding-bottom: 10px;
  background-color: rgba(255, 204, 255, 0.5);
}
.goods_tag{
    margin-left: 20px;
}
.tag-group{
    margin-top: 200px;
    margin-left: 500px;
}
</style>